<template>
  <div>
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"
        ><strong>{{ activeTask }}</strong> item left</span
      >
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <router-link active-class="selected" to="/">All</router-link>
        </li>
        <li>
          <router-link to="/active" active-class="selected">Active</router-link>
        </li>
        <li>
          <router-link to="/completed" active-class="selected">Completed</router-link>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <!-- 通过已完成的数量来控制显示和隐藏 -->
      <button class="clear-completed" v-show="doneTask" @click="clearCompleted">
        Clear completed
      </button>
    </footer>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
  name: 'Footer',
  data(){
	return {
		selected:'/All'
	}
  },
  methods: {
    ...mapMutations(['CLEAR_COMPONENT']),
    //批量删除已完成的
    clearCompleted() {
      this.CLEAR_COMPONENT();
    },
  },
  computed: {
    ...mapGetters(['activeTask', 'doneTask']),
  },
  mounted() {
    console.log(this.$route);
  },
};
</script>

<style></style>
